<template>
  <div class="banner">
    <div class="banner-item" :style="{ backgroundImage: `url(${banner.img})` }">
      <div data-v-3000ce76="" class="banner-logo">
        <img
          data-v-3000ce76=""
          data-src="https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/02/27/15827715813095437.png"
          src="https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/06/05/15913433372324824.png"
          lazy="loaded"
        />
        <span data-v-3000ce76="" style="font-size: 40px">Facebook</span>
      </div>
      <div class="title">{{ banner.title }}</div>
      <div class="desc">{{ banner.desc }}</div>
    </div>
  </div>
  <div
    data-v-87f86580=""
    data-v-479e653e=""
    class="six-demo"
    id="4f358566-2d76"
    component-name="Six"
    style="background: rgb(255, 255, 255)"
  >
    <div data-v-87f86580="" class="comp-atible">
      <p data-v-87f86580="" style="color: rgb(30, 30, 30)"></p>
      <div data-v-87f86580="" class="six-demo-fex">
        <div data-v-87f86580="" class="six-list">
          <div data-v-87f86580="" class="animated fadeInLeft six-aboust">
            <p data-v-87f86580="" style="color: rgb(51, 51, 51)">
              跨多个社交平台
            </p>
            <div
              data-v-87f86580=""
              class="six-text"
              style="color: rgb(156, 156, 156)"
            >
              Facebook是全球最大的互动社区，月活跃用户数达到29亿+,其系列应用和服务跨Facebook和Messenger等多个平台，可提供多种广告类型服务。
            </div>
          </div>
        </div>
        <img
          data-v-87f86580=""
          alt=""
          class="animated fadeInRight six-img"
          data-src="https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/03/10/15838228314428464.png"
          src="https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/03/10/15838228314428464.png"
          lazy="loaded"
        />
      </div>
    </div>
  </div>
  <div
    data-v-3f0002ac=""
    data-v-479e653e=""
    class="night-demo"
    id="9f4cf7e6-7beb"
    component-name="Night"
    style="background: rgb(242, 246, 250)"
  >
    <div data-v-3f0002ac="" class="comp-atible">
      <p data-v-3f0002ac="" style="color: rgb(2, 27, 78)">
        精准定位您的目标客户
      </p>
      <div data-v-3f0002ac="" class="night-flex-grid">
        <div data-v-3f0002ac="" class="icon-card">
          <img
            data-v-3f0002ac=""
            data-src="https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/03/10/15838225482872324.png"
            src="https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/03/10/15838225482872324.png"
            lazy="loaded"
          />
          <div data-v-3f0002ac="" class="icon-text">
            <p data-v-3f0002ac="">多种格式</p>
            <div data-v-3f0002ac="" class="night-text">
              支持图片、视频、GIF等广告创意
            </div>
          </div>
        </div>
        <div data-v-3f0002ac="" class="icon-card">
          <img
            data-v-3f0002ac=""
            data-src="https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/03/10/15838225482895494.png"
            src="https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/03/10/15838225482895494.png"
            lazy="loaded"
          />
          <div data-v-3f0002ac="" class="icon-text">
            <p data-v-3f0002ac="">支持动态广告</p>
            <div data-v-3f0002ac="" class="night-text">
              对不同用户展示不同的广告创意
            </div>
          </div>
        </div>
        <div data-v-3f0002ac="" class="icon-card">
          <img
            data-v-3f0002ac=""
            data-src="https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/03/10/1583822548286248.png"
            src="https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/03/10/1583822548286248.png"
            lazy="loaded"
          />
          <div data-v-3f0002ac="" class="icon-text">
            <p data-v-3f0002ac="">深度数据支撑</p>
            <div data-v-3f0002ac="" class="night-text">
              CPM、CTR、CPC多种深度数据支撑
            </div>
          </div>
        </div>
        <div data-v-3f0002ac="" class="icon-card">
          <img
            data-v-3f0002ac=""
            data-src="https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/03/10/15838225482887465.png"
            src="https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/03/10/15838225482887465.png"
            lazy="loaded"
          />
          <div data-v-3f0002ac="" class="icon-text">
            <p data-v-3f0002ac="">实时数据监控</p>
            <div data-v-3f0002ac="" class="night-text">
              pixel、SDK实时监控用户行为
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div
    data-v-37559afe=""
    data-v-479e653e=""
    class="third-demo"
    id="a753f92f-adfe"
    component-name="Third"
    style="
      background-image: url('https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/02/15/15817564986282381.png');
    "
  >
    <div data-v-37559afe="" class="comp-atible">
      <div data-v-37559afe="" class="love-row">
        <img
          data-v-37559afe=""
          alt=""
          data-src="https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/02/19/15820974397653666.png"
          src="https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/02/19/15820974397653666.png"
          lazy="loaded"
          style="width: 50px; margin: auto"
        />
        <div data-v-37559afe="" class="icon-title">29亿+</div>
        <div data-v-37559afe="" class="icon-text">Facebook月活跃用户</div>
      </div>
      <div data-v-37559afe="" class="love-row">
        <img
          data-v-37559afe=""
          alt=""
          data-src="https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/02/16/15818573440686312.png"
          src="https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/02/16/15818573440686312.png"
          lazy="loaded"
          style="width: 50px; margin: auto"
        />
        <div data-v-37559afe="" class="icon-title">15亿+</div>
        <div data-v-37559afe="" class="icon-text">Instargram月活跃用户</div>
      </div>
      <div data-v-37559afe="" class="love-row">
        <img
          data-v-37559afe=""
          alt=""
          data-src="https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/02/16/15818573440702226.png"
          src="https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/02/16/15818573440702226.png"
          lazy="loaded"
          style="width: 50px; margin: auto"
        />
        <div data-v-37559afe="" class="icon-title">10亿+</div>
        <div data-v-37559afe="" class="icon-text">Messenger月活跃用户</div>
      </div>
    </div>
  </div>
  <div
    data-v-96122de0=""
    data-v-479e653e=""
    class="twenty-one"
    id="7e57e103-9ee3"
    component-name="TwentyOne"
  >
    <div
      data-v-96122de0=""
      class="twenty-content"
      style="background: rgb(229, 240, 255)"
    >
      <div
        data-v-96122de0=""
        class="twenty-text"
        style="color: rgb(83, 123, 190)"
      >
        <div data-v-96122de0="" class="reason-content">
          <p data-v-96122de0="" class="twenty-first">Facebook</p>
          <p data-v-96122de0="" class="twenty-second">广告介绍</p>
          <p data-v-96122de0="" class="twenty-three"></p>
          <div data-v-96122de0="" class="twenty-four">
            Facebook平台的月活跃用户人数高达29亿+，用户基数大，受众定位精准，能很好提高企业的知名度。无论您是刚开始接触社媒营销，还是希望开辟全新发展路线，选择Facebook平台投放广告都是明智之选！
          </div>
        </div>
      </div>
      <div
        data-v-96122de0=""
        class="twenty-right"
        style="
          background-image: url('https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/03/06/15834850427523220.jpg');
        "
      ></div>
    </div>
  </div>
  <div
    data-v-4289a836=""
    data-v-479e653e=""
    class="eight-demo"
    id="494ee256-dbbc"
    component-name="Eight"
    style="background: rgb(255, 255, 255)"
  >
    <div data-v-4289a836="" class="comp-atible">
      <p data-v-4289a836="" style="color: rgb(2, 27, 78)">
        Facebook助您畅销海外
      </p>
      <div data-v-4289a836="" class="eight-flex-grid">
        <div data-v-4289a836="" class="love-row">
          <div data-v-4289a836="" class="eight-icon">
            <img
              data-v-4289a836=""
              alt=""
              data-src="https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/03/10/15838283198095550.png"
              src="https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/03/10/15838283198095550.png"
              lazy="loaded"
            />
          </div>
          <div data-v-4289a836="" class="icon-text">
            <p data-v-4289a836="">用户体量大，活跃度高</p>
            <div data-v-4289a836="" class="text-conten">
              Facebook是全球最大的社交媒体平台，在全球范围内达到了35亿+用户，全球几乎三分之一的人都使用Facebook，月活跃用户数高达29亿+，积极抢攻亿万流量，助力品牌实现高营收增长。
            </div>
          </div>
        </div>
        <div data-v-4289a836="" class="love-row">
          <div data-v-4289a836="" class="eight-icon">
            <img
              data-v-4289a836=""
              alt=""
              data-src="https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/03/10/15838283198096241.png"
              src="https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/03/10/15838283198096241.png"
              lazy="loaded"
            />
          </div>
          <div data-v-4289a836="" class="icon-text">
            <p data-v-4289a836="">强操作性</p>
            <div data-v-4289a836="" class="text-conten">
              Facebook主页能完美契合移动设备展示模式，方便商家与客户实时沟通，吸引客户购买，保持客户粘性。利用Facebook主页管理应用，商家可以在管理主页和快速响应客户时不受地域限制。
            </div>
          </div>
        </div>
        <!---->
        <div data-v-4289a836="" class="love-row">
          <div data-v-4289a836="" class="eight-icon">
            <img
              data-v-4289a836=""
              alt=""
              data-src="https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/03/10/15838283198096429.png"
              src="https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/03/10/15838283198096429.png"
              lazy="loaded"
            />
          </div>
          <div data-v-4289a836="" class="icon-text">
            <p data-v-4289a836="">Facebook时间线模式</p>
            <div data-v-4289a836="" class="text-conten">
              自然不突兀的将广告融入网页，让品牌广告营销于无形，让用户有良好的浏览体验，促进销售转化。
            </div>
          </div>
        </div>
        <div data-v-4289a836="" class="love-row">
          <div data-v-4289a836="" class="eight-icon">
            <img
              data-v-4289a836=""
              alt=""
              data-src="https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/03/10/1583828320004291.png"
              src="https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/03/10/1583828320004291.png"
              lazy="loaded"
            />
          </div>
          <div data-v-4289a836="" class="icon-text">
            <p data-v-4289a836="">精准的广告营销</p>
            <div data-v-4289a836="" class="text-conten">
              Facebook有强大的受众定位功能，并且组之间经常会有类似的信息流，可将优质受众连带其好友网络直接引导至商家的网站或应用，品牌的信息容易得到爆发性传播。
            </div>
          </div>
        </div>
        <div data-v-4289a836="" class="love-row">
          <div data-v-4289a836="" class="eight-icon">
            <img
              data-v-4289a836=""
              alt=""
              data-src="https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/03/10/15838283200041040.png"
              src="https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/03/10/15838283200041040.png"
              lazy="loaded"
            />
          </div>
          <div data-v-4289a836="" class="icon-text">
            <p data-v-4289a836="">竞争对手很难找到自己的广告</p>
            <div data-v-4289a836="" class="text-conten">
              广告根据设置的人群特征进行人群定位，只有符合人群定位的特征时，才能看到广告消息，竞争对手无法找到或复制自己的广告。
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
const banner = {
  img: "	https://site-manager.oss-cn-shanghai.aliyuncs.com/images/2020/06/05/15913431220642778.jpg",
  title: "COLOURMIX助您实现商业目标",
  desc: "整合媒体资源 精准广告投放",
};
</script>
<style lang="less" scoped>
.banner {
  height: 540px;
  width: 100%;
  margin-top: 64px;
  .banner-item {
    height: 100%;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    .banner-logo {
      img {
        display: inline-block;
        margin-right: 15px;
        vertical-align: sub;
        width: 40px;
      }
    }
    .title {
      color: #fff;
      font-size: 42px;
      font-weight: 600;
      letter-spacing: 3px;
      line-height: 70px;
      margin-bottom: 4px;
    }
    .desc {
      color: #fff;
      font-size: 18px;
      line-height: 27px;
      margin: 8px 0 60px;
      opacity: 0.9;
    }
  }
}
.six-demo {
  overflow: hidden;
  padding: 80px 0;
  .comp-atible {
    margin: auto;
    overflow: hidden;
    width: 1080px;
  }
  p {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 20px;
    text-align: center;
  }
  .six-demo-fex {
    align-items: flex-start;
    display: flex;
    .six-list {
      display: inline-block;
      padding: 0 80px;
      position: relative;
      width: 500px;
      .six-aboust {
        left: 20px;
        position: absolute;
        top: 50px;
        width: 400px;
      }
      p {
        color: #333;
        font-size: 32px;
        font-weight: 700;
        text-align: left;
      }
      .six-text {
        font-size: 16px;
        letter-spacing: 1px;
        line-height: 20px;
        margin: 15px 0;
      }
      .fillet {
        border-radius: 28px !important;
      }
      .btn-exten {
        border: none;
        border-radius: 28px;
        cursor: pointer;
        display: inline-block;
        font-size: 14px;
        line-height: 24px;
        margin-bottom: 20px;
        margin-top: 20px;
        outline: none;
        padding: 10px 35px;
      }
    }
  }
  .six-img {
    margin-right: 40px;
    width: 500px;
  }
}

.eight-demo {
  padding: 80px 0 60px;
  text-align: center;
  .comp-atible {
    margin: auto;
    overflow: hidden;
    width: 1080px;
  }
  p {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 60px;
  }
  .eight-flex-grid {
    display: grid;
    gap: 40px;
    grid-template-columns: repeat(4, 1fr);
    padding-bottom: 60px;
    padding-left: 20px;
    .love-row {
      text-align: left;
      .eight-icon {
        height: 40px;
        line-height: 40px;
        margin-bottom: 15px;
        text-align: center;
        width: 40px;
        img {
          width: 42px;
        }
      }
      .icon-text {
        p {
          color: #021b4e;
          font-size: 14px;
          margin-bottom: 10px;
        }
        .text-conten {
          color: #516286;
          font-size: 14px;
          min-height: 65px;
        }
      }
    }
  }
}
</style>
